<template>
  <div>
    <el-form-item label="选择时间段：" style="margin-top: 5px">
      <el-row>
        <el-col :span="15">
          <el-date-picker
            v-model="queryForm.dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-row>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <p class="pinformation">区域统计</p>
        <el-row>
          <el-col :span="12">
            <div id="htefb" style="width: 100%; height: 22vh"></div>
          </el-col>
          <el-col :span="12">
            <div id="rwfb" style="width: 100%; height: 22vh"></div>
          </el-col>
        </el-row>
        <p class="pinformation">业务类型统计</p>
        <el-row>
          <el-col :span="12">
            <div id="htefb1" style="width: 100%; height: 22vh"></div>
          </el-col>
          <el-col :span="12">
            <div id="rwfb1" style="width: 100%; height: 22vh"></div>
          </el-col>
        </el-row>
        <p class="pinformation">设备使用率</p>
        <el-row>
          <el-col :span="24">
            <div
              id="sbsyl"
              style="width: 100%"
              :style="'height:' + height + 'px'"
            ></div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <p class="pinformation">工作量统计</p>
        <el-row>
          <el-col :span="12">
            <div id="xccy" style="width: 100%; height: 22vh"></div>
          </el-col>
          <el-col :span="12">
            <div id="scxs" style="width: 100%; height: 26vh"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div id="sysfx" style="width: 100%; height: 22vh"></div>
          </el-col>
          <el-col :span="12">
            <div id="bgsc" style="width: 100%; height: 26vh"></div>
          </el-col>
        </el-row>
        <p class="pinformation">样品管理</p>
        <el-row>
          <el-col :span="24">
            <div id="ypgl" style="width: 100%;height: 20vh;"></div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { nextTick } from "vue";
import * as echarts from "echarts";

const queryForm = ref({});
const height = ref(0);

const data = ref([
  { name: "济南", value: 10000 },
  { name: "泰安", value: 30000 },
  { name: "青岛", value: 50000 },
  { name: "临沂", value: 10000 },
]);

const option = ref({
  title: {
    text: "合同额分布",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: function (params) {
      var percentage = ((params.value / 100000) * 100).toFixed(2);
      return (
        params.name +
        "<br/>合同额：" +
        params.value +
        "元<br/>占比：" +
        percentage +
        "%"
      );
    },
  },
  legend: {
    orient: "vertical",
    left: "right",
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "inner", // 将标签位置改为内部
        formatter: "{d}%", // 只显示占比
        fontSize: 12,
      },
      labelLine: {
        show: false, // 不显示label线条
      },
      data: data.value.map(function (item) {
        return {
          name: item.name,
          value: item.value,
          percentage: ((item.value / 100000) * 100).toFixed(2) + "%",
        };
      }),
    },
    {
      type: "pie",
      radius: ["0%", "30%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "center",
        formatter: function (params) {
          return "总额\n" + 100000 + "元";
        },
        fontSize: 16,
        fontWeight: "400",
      },
      emphasis: {
        label: {
          show: true,
        },
      },
      labelLine: {
        show: false,
      },
      animation: false,
      tooltip: {
        show: false,
      },
      data: [{ value: 1, itemStyle: { color: "transparent" } }],
    },
  ],
});

const option1 = ref({
  title: {
    text: "任务分布",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: function (params) {
      var percentage = ((params.value / 100000) * 100).toFixed(2);
      return (
        params.name +
        "<br/>方案数：" +
        params.value +
        "<br/>占比：" +
        percentage +
        "%"
      );
    },
  },
  legend: {
    orient: "vertical",
    left: "right",
  },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "inner", // 将标签位置改为内部
        formatter: "{d}%", // 只显示占比
        fontSize: 12,
      },
      labelLine: {
        show: false, // 不显示label线条
      },
      data: data.value.map(function (item) {
        return {
          name: item.name,
          value: item.value,
          percentage: ((item.value / 100000) * 100).toFixed(2) + "%",
        };
      }),
    },
    {
      type: "pie",
      radius: ["0%", "30%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "center",
        formatter: function (params) {
          return "方案总数\n" + 100000 + "元";
        },
        fontSize: 16,
        fontWeight: "400",
      },
      emphasis: {
        label: {
          show: true,
        },
      },
      labelLine: {
        show: false,
      },
      animation: false,
      tooltip: {
        show: false,
      },
      data: [{ value: 1, itemStyle: { color: "transparent" } }],
    },
  ],
});

const option2 = ref({
  title: {
    text: "合同额分布",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} <br/>占比: {d}%", // 展示格式
  },
  legend: {
    orient: "vertical",
    left: "right",
  },
  series: [
    {
      name: "例行检测",
      type: "pie",
      radius: "50%",
      data: [
        { value: 27, name: "环境影响评价" },
        { value: 21, name: "土壤污染状况调查" },
        { value: 0, name: "对比检测" },
        { value: 67, name: "例行检测" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});

const option3 = ref({
  title: {
    text: "任务分布",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} <br/>占比: {d}%", // 展示格式
  },
  legend: {
    orient: "vertical",
    left: "right",
  },
  series: [
    {
      name: "例行检测",
      type: "pie",
      radius: "50%",
      data: [
        { value: 27, name: "环境影响评价" },
        { value: 21, name: "土壤污染状况调查" },
        { value: 0, name: "对比检测" },
        { value: 67, name: "例行检测" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});

const option4 = ref({
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
  legend: {
    orient: "vertical",
    left: "right",
  },
  radar: [
    {
      indicator: [
        { text: 'Indicator1', max: 150 },
        { text: 'Indicator2', max: 150 },
        { text: 'Indicator3', max: 150 },
        { text: 'Indicator4', max: 120 },
        { text: 'Indicator5', max: 108 },
        { text: 'Indicator6', max: 72 }
      ],
      center: ['50%', '50%'],
      axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      }
    }
  ],
  series: [
    {
      type: 'radar',
      radarIndex: 0, // 将雷达图索引改为0，与上述 radar 配置对应
      data: [
        {
          value: [120, 118, 130, 100, 99, 70],
          name: 'Data C',
          symbol: 'rect',
          symbolSize: 12,
          lineStyle: {
            type: 'dashed'
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            }
          }
        },
        {
          value: [100, 93, 50, 90, 70, 60],
          name: 'Data D',
          areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(255, 145, 124, 0.1)',
                offset: 0
              },
              {
                color: 'rgba(255, 145, 124, 0.9)',
                offset: 1
              }
            ])
          }
        }
      ]
    }
  ]
})

const option5 = ref({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["水", "气","声","土","固废"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    },
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 1000,
        interval: 200.0,
      },
    ],
    series: [
      {
        name: "水",
        type: "line",
        data: [125, 212, 91, 134, 120, 330, 810, 100, 953, 226, 554, 440],
      },
      {
        name: "气",
        type: "line",
        data: [560, 224, 102, 230, 810, 100, 120, 556, 458, 752, 210, 435],
      },
      {
        name: "声",
        type: "line",
        data: [130, 232, 231, 334, 120, 330, 810, 100, 953, 226, 554, 440],
      },
      {
        name: "土",
        type: "line",
        data: [559, 244, 432, 430, 810, 100, 120, 556, 458, 752, 210, 435],
      },
      {
        name: "固废",
        type: "line",
        data: [250, 254, 532, 530, 810, 100, 120, 556, 458, 752, 210, 435],
      },
    ],
  })
const option6 = ref({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["总量", "有机","无机","理化","金属"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    },
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 1000,
        interval: 200.0,
      },
    ],
    series: [
      {
        name: "总量",
        type: "line",
        data: [125, 212, 91, 134, 120, 330, 810, 100, 953, 226, 554, 440],
      },
      {
        name: "有机",
        type: "line",
        data: [560, 224, 102, 230, 810, 100, 120, 556, 458, 752, 210, 435],
      },
      {
        name: "无机",
        type: "line",
        data: [130, 232, 231, 334, 120, 330, 810, 100, 953, 226, 554, 440],
      },
      {
        name: "理化",
        type: "line",
        data: [559, 244, 432, 430, 810, 100, 120, 556, 458, 752, 210, 435],
      },
      {
        name: "金属",
        type: "line",
        data: [250, 254, 532, 530, 810, 100, 120, 556, 458, 752, 210, 435],
      },
    ],
  })

const  option7 = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['今年', '去年']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '去年',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
  ],
  series: [
    {
      name: '今年',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: '去年',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
  ]
})

const  option8 = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['检测报告', '质控报告']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value}ml'
      }
    },
  ],
  series: [
    {
      name: '检测报告',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + "ml";
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: '质控报告',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
  ]
})

const  option9 = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['样品交接表', '样品发放表']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value}ml'
      }
    },
  ],
  series: [
    {
      name: '样品交接表',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + "ml";
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: '样品发放表',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
  ]
})


function getHeight() {
  var box = document.getElementById("sbsyl");
  var boxDistanceFromTop = box.getBoundingClientRect().top;
  height.value = window.innerHeight - boxDistanceFromTop - 21;
}

const myChart = ref();
const myChart1 = ref();
const myChart2 = ref();
const myChart3 = ref();
const myChart4 = ref();
const myChart5 = ref();
const myChart6 = ref();
const myChart7 = ref();
const myChart8 = ref();
const myChart9 = ref();

onMounted(() => {
  nextTick(() => {
    getHeight();
    window.addEventListener("resize", getHeight);
    nextTick(() => {
      myChart.value = markRaw(echarts.init(document.getElementById("htefb")));
      myChart1.value = markRaw(echarts.init(document.getElementById("rwfb")));
      myChart2.value = markRaw(echarts.init(document.getElementById("htefb1")));
      myChart3.value = markRaw(echarts.init(document.getElementById("rwfb1")));
      myChart4.value = markRaw(echarts.init(document.getElementById("sbsyl")));
      myChart5.value = markRaw(echarts.init(document.getElementById("xccy")));
      myChart6.value = markRaw(echarts.init(document.getElementById("sysfx")));
      myChart7.value = markRaw(echarts.init(document.getElementById("scxs")));
      myChart8.value = markRaw(echarts.init(document.getElementById("bgsc")));
      myChart9.value = markRaw(echarts.init(document.getElementById("ypgl")));
      myChart.value.setOption(option.value);
      myChart1.value.setOption(option1.value);
      myChart2.value.setOption(option2.value);
      myChart3.value.setOption(option3.value);
      myChart4.value.setOption(option4.value);
      myChart5.value.setOption(option5.value);
      myChart6.value.setOption(option6.value);
      myChart7.value.setOption(option7.value);
      myChart8.value.setOption(option8.value);
      myChart9.value.setOption(option9.value);
    });
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>
